/*
 * @Author: 自迩
 * @Date: 2022-03-23 14:38:18
 * @LastEditTime: 2022-03-23 14:43:49
 * @LastEditors: your name
 * @Description:
 * @FilePath: \class-ending-homework\src\components\UserYear\index.jsx
 */
import React from 'react'
import './index.css'

const yearArr = [2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021]
export default function UserYear(props) {
    let {style,userYear,year} = props
    let {yearBoxMouseOver,yearBoxMouseOut,yearBoxClick} = props
  return (
    <div id="user-year-box">
            <p>选择您入学年份</p>
            <div className={style} id="user-year" onMouseOver={yearBoxMouseOver} onMouseOut={yearBoxMouseOut}>{year}</div>
            <table id="year-table" style={{visibility:userYear}} onClick={yearBoxClick} onMouseOver={yearBoxMouseOver} onMouseOut={yearBoxMouseOut}>
                <tbody>
                    {
                        yearArr.map((value,index)=>{
                            if((index+1)%4 === 0){
                                let fontWeight = [400,400,400,400]
                                if(yearArr[index-3] === year)
                                    fontWeight[0] = 700
                                if(yearArr[index-2] === year)
                                    fontWeight[1] = 700
                                if(yearArr[index-1] === year)
                                    fontWeight[2] = 700
                                if(yearArr[index] === year)
                                    fontWeight[3] = 700
                               return (<tr key={`year${value}`}><td style={{fontWeight:fontWeight[0]}}>{yearArr[index-3]}</td><td style={{fontWeight:fontWeight[1]}}>{yearArr[index-2]}</td><td style={{fontWeight:fontWeight[2]}}>{yearArr[index-1]}</td><td style={{fontWeight:fontWeight[3]}} >{yearArr[index]}</td></tr>)
                            }

                        })
                    }

                </tbody>
            </table>

        </div>
  )
}
